<script lang="ts">
import Vue from 'vue'
import { loadMicroApp } from 'qiankun'
export default Vue.extend({
  data () {
    return {
      microApp1: null as any
      // microApp2: null as any
    }
  },
  mounted () {
    this.loadMicroApp()
  },
  methods: {
    loadMicroApp () {
      this.microApp1 = loadMicroApp({
        name: 'app1',
        entry: '//localhost:3003',
        container: this.$refs.app1 as HTMLElement,
        props: { brand: 'qiankun' }
      })
      // this.microApp2 = loadMicroApp({
      //   name: 'app2',
      //   entry: '//localhost:3002',
      //   container: this.$refs.app2 as HTMLElement,
      //   props: { brand: 'qiankun' }
      // })
    }
  },
  destroyed () {
    this.microApp1.unmount()
    // this.microApp2.unmount()
  }
})
</script>
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div ref="app1"></div>
    <div ref="app2"></div>
  </div>
</template>
